<template>
	   <div>
			<div id="data">
				<p>
					<span id="prev" @click="prev">上一月</span>
					<span id="nian">{{nianD}}年</span>
					<span id="next" @click="next">下一月</span>
				</p>
				<h5 id="yue">{{arr[this.yue]}}</h5>
				<ul id="title">
					<li>日</li>
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li>六</li>
				</ul>
				<ul id="date">
		         <!-- <li v-for="(idata,ind) in alldata" :key="ind" :title="ind" :class="addclass(idata)">{{allget(ind,idata)}}</li> -->
				</ul>
			</div>
			    
		 </div>
</template>

<script>
import {mapGetters,mapState, mapMutations, mapActions} from 'vuex'
import axios from 'axios'

export default {
	name:"datas",
	data(){
		return{
			dat:this.comdtar(),
			nianD:"",
			yueD:"",
			tianD:"",
			setZhou:"",
			setTian:'',
			nian:'',
			yue:'',
			alldata:[],
			arr:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
		}
	},
	created () {
	      
	},
	mounted() {
		//初始化时间
		this.Initialization()
		//添加数据
		this.add()
	},
	methods: {
		add() {
			document.getElementById('date').innerHTML = "";
			// let dat = new Date(); //当前时间
			var nian = this.dat.getFullYear(); //当前年份
			var yue = this.dat.getMonth(); //当前月
			var tian = this.dat.getDate(); //当前天
			console.log("sskm",nian,yue,tian)
			//把时间设为下个月的1号    然后天数减去1  就可以得到 当前月的最后一天;
			let setDat=new Date(nian, yue + 1, 1 - 1)
			let setTian = setDat.getDate(); //获取 当前月最后一天
			let setZhou = new Date(nian, yue, 1).getDay(); //获取当前月第一天 是 周几
			console.log("ss",setZhou)
				let spmm=[]
			 this.setZhou=setZhou
			 this.nian=nian
			 this.yue=yue
				for (var i = 0; i < setZhou; i++) { //渲染空白 与 星期 对应上
					var li = document.createElement('li');
							li.style.float="left";
							li.style.width="34px";
							li.style.height="34px";
							li.style.margin="1px 1px";
							li.style.border="2px solid rgba(0, 0, 0, 0)";
							li.style.lineHeight="34px";
							li.style.textAlign="center";
							li.style.cursor="pointer";
					
		
					document.getElementById('date').appendChild(li);
				}

				for (var i = 1; i <= setTian; i++) { //利用获取到的当月最后一天 把  前边的 天数 都循环 出来
					var li = document.createElement('li');
							var li = document.createElement('li');
							li.style.float="left";
							li.style.width="34px";
							li.style.height="34px";
							li.style.margin="1px 1px";
							li.style.border="2px solid rgba(0, 0, 0, 0)";
							li.style.lineHeight="34px";
							li.style.textAlign="center";
							li.style.cursor="pointer";
					li.innerText = i;
					if (nian == this.nianD && yue == this.yueD && i == this.tianD) {
						li.className = "active";
						li.style.color="red";
					} else {
						li.className = "hover";
						// li.style.border="2px solid red";
					}
					document.getElementById('date').appendChild(li);
				}
				
			this.alldata=spmm
		
		},
		
		
		Initialization(){
			// let dat = new Date(); //当前时间
			this.nianD = this.dat.getFullYear(); //当前年份
			this.yueD = this.dat.getMonth(); //当前月
			this.tianD = this.dat.getDate();//当前天    这保存的年月日 是为了 当到达当前日期 有对比
		},
		
		
		allget(index,idata){
			return (index>=this.setZhou)?idata: ""
		},
		
		addclass(idata){
			return this.nian==this.nianD&& this.yue == this.yueD && idata== this.tianD?
			"active":"hover"
		},
		 next(){
			 let detadoem=this.dat
			let sp=detadoem.setMonth(detadoem.getMonth() + 1); //当点击下一个月时 对当前月进行加1;
			// this.dat=sp
			this.comdtar(sp)
			this.add()
			console.log(sp)
		 },
		 prev(){
			 
		 },
		 comdtar(data){
			 return data?data:new Date()
		 },
		 claerli(){
			 var li = document.createElement('li');
			 		li.style.float="left";
			 		li.style.width="34px";
			 		li.style.height="34px";
			 		li.style.margin="1px 1px";
			 		li.style.border="2px solid rgba(0, 0, 0, 0)";
			 		li.style.lineHeight="34px";
			 		li.style.textAlign="center";
			 		li.style.cursor="pointer";
				return li
		 }
		 
	},
	computed:{
	
	},
	watch:{
		
	},
	components:{
		
  }
	
}

</script>

<style  scoped >
	* {
		margin: 0px;
		padding: 0px;
	}
	
	#data {
		width: 280px;
		border: 1px solid #000000;
		margin: 20px auto;
	}
	
	#data>p {
		display: flex;
		color: #fff;
	}
	
	#yue{
		color: #fff;
	}
	
	#data>h5 {
		text-align: center;
	}
	
	#data>p>span {
		padding: 0 10px;
	}
	
	#prev,
	#next {
		cursor: pointer;
	}
	
	#nian {
		flex: 1;
		text-align: center;
	}
	
	#title {
		overflow: hidden;
		list-style: none;
		background: #ccc;
	}
	
	#title>li {
		float: left;
		width: 40px;
		height: 26px;
		line-height: 26px;
		text-align: center;
	}
	
	#date {
		overflow: hidden;
		list-style: none;
	}
	
	#date>li {
		float: left;
		width: 34px;
		height: 34px;
		margin: 1px 1px;
		border: 2px solid rgba(0, 0, 0, 0);
		line-height: 34px;
		text-align: center;
		cursor: pointer;
	}
	
	.lmk {
		float: left;
		width: 34px;
		height: 34px;
		margin: 1px 1px;
		border: 2px solid rgba(0, 0, 0, 0);
		line-height: 34px;
		text-align: center;
		cursor: pointer;
	}
	
	
	#date>.hover:hover {
		border: 2px solid red;
	}
	
	.active {
		color: red;
	}

</style>

